<template>
  <div class="welcome-container">
    <!-- 欢迎卡片 -->
    <el-card class="welcome-card">
      <div class="welcome-header">
        <div class="logo-image">
          <img style="width: 80px;" src="https://p1.ssl.qhimg.com/dr/270_500_/t01c934675ded9b146c.jpg?size=500x500" alt="Logo">
        </div>
        <div class="welcome-title">
          <h2>欢迎使用文化馆预约管理系统</h2>
          <p>本系统提供展览预约、解说预约、留言互动等功能，让您的文化体验更加便捷。</p>
        </div>
      </div>
    </el-card>
    
    <el-row :gutter="20">
      <!-- 公告栏 -->
      <el-col :span="16">
        <el-card class="announcement-card">
          <div slot="header" class="card-header">
            <span>最新公告</span>
          </div>
          <div v-if="displayAnnouncements.length > 0">
            <div v-for="item in displayAnnouncements" :key="item.id" class="announcement-item">
              <div class="announcement-title">
                <span class="title-text">{{ item.title }}</span>
                <span class="publish-time">{{ formatDate(item.publishTime) }}</span>
              </div>
              <div class="announcement-content">{{ item.content }}</div>
              <el-divider></el-divider>
            </div>
          </div>
          <div v-else class="empty-data">
            <i class="el-icon-bell"></i>
            <p>暂无公告</p>
          </div>
        </el-card>
      </el-col>
      
      <!-- 快捷入口 -->
      <el-col :span="8">
        <el-card class="quick-entry-card">
          <div slot="header" class="card-header">
            <span>快捷入口</span>
          </div>
          <div class="quick-entry-list">
            <div class="quick-entry-item" @click="goToExhibition">
              <i class="el-icon-picture"></i>
              <span>展览预约</span>
            </div>
            <div class="quick-entry-item" @click="goToGuide">
              <i class="el-icon-user"></i>
              <span>解说预约</span>
            </div>
            <div class="quick-entry-item" @click="goToReservation">
              <i class="el-icon-document"></i>
              <span>我的预约</span>
            </div>
            <div class="quick-entry-item" @click="goToMessage">
              <i class="el-icon-chat-line-round"></i>
              <span>留言板</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import moment from 'moment'

export default {
  name: 'WelcomePage',
  data() {
    return {
      // 模拟公告数据
      mockAnnouncements: [
        {
          id: 1,
          title: '关于临时闭馆通知',
          content: '因场馆设施维护，本馆将于2023年6月1日至6月3日临时闭馆，给您带来的不便敬请谅解。',
          publishTime: '2023-05-25 10:00:00'
        },
        {
          id: 2,
          title: '新展览《古代陶瓷艺术》开展通知',
          content: '《古代陶瓷艺术》特展将于2023年7月1日正式开展，展期3个月，欢迎广大市民前来参观。',
          publishTime: '2023-05-20 14:30:00'
        },
        {
          id: 3,
          title: '端午节活动安排',
          content: '端午节期间，本馆将举办传统文化体验活动，包括香囊制作、诗词朗诵等，欢迎参与。',
          publishTime: '2023-05-15 09:15:00'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['announcements', 'isAdmin']),
    // 如果store中没有公告数据，则使用模拟数据
    displayAnnouncements() {
      return this.announcements.length > 0 ? this.announcements : this.mockAnnouncements
    }
  },
  created() {
    // 获取公告列表
    this.$store.dispatch('getAnnouncements')
  },
  methods: {
    // 格式化日期
    formatDate(dateStr) {
      return moment(dateStr).format('YYYY-MM-DD HH:mm')
    },
    // 跳转到展览预约
    goToExhibition() {
      this.$router.push('/exhibition/list')
    },
    // 跳转到解说预约
    goToGuide() {
      this.$router.push('/guide/list')
    },
    // 跳转到我的预约
    goToReservation() {
      this.$router.push('/reservation/list')
    },
    // 跳转到留言板
    goToMessage() {
      this.$router.push('/message/board')
    }
  }
}
</script>

<style scoped>
.welcome-container {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
  background-color: #f0f7ff;
}

.welcome-header {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.logo-image {
  width: 80px;
  height: 80px;
  margin-right: 20px;
  border-radius: 50%;
  background-color: #ddd; /* 占位背景色，实际应替换为真实logo */
}

.welcome-title {
  flex: 1;
}

.welcome-title h2 {
  margin: 0 0 10px 0;
  color: #303133;
}

.welcome-title p {
  margin: 0;
  color: #606266;
  font-size: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.announcement-card, .quick-entry-card {
  height: 400px;
  overflow-y: auto;
}

.announcement-item {
  margin-bottom: 15px;
}

.announcement-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.title-text {
  font-weight: bold;
  color: #303133;
}

.publish-time {
  font-size: 12px;
  color: #909399;
}

.announcement-content {
  color: #606266;
  line-height: 1.6;
  text-align: justify;
}

.quick-entry-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.quick-entry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  background-color: #f5f7fa;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.quick-entry-item:hover {
  background-color: #ecf5ff;
  color: #409EFF;
}

.quick-entry-item i {
  font-size: 30px;
  margin-bottom: 10px;
}

.empty-data {
  text-align: center;
  padding: 30px 0;
  color: #909399;
}

.empty-data i {
  font-size: 40px;
  margin-bottom: 10px;
}
</style>